/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import {Form,  Input ,InputNumber,Radio,TreeSelect,Select,DatePicker,Button,Upload,Icon ,Cascader} from 'antd';
import {connect} from 'dva';
import {download} from '@/utils/utils';
import request from '@/utils/request';
import config from '@/config/config'
const FormItem = Form.Item;
const Option = Select.Option;
class EditUserArchives extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fileList: [],
      concentrators:[],
      all_protocols:[]
    };
  }
  componentDidMount() {
    // this.props.findChildFunc(this.getState);
    const that=this
    request(`/all_protocols`, {
      method: 'GET',
    }).then((response)=> {
      if(response.status===200){
        that.setState({
          all_protocols:response.data.data
        })
      }
    })

  }
  getState=()=>{
    return this.state.fileList
  }
  downloadTemplates=()=>{
    download(`${config.prefix}/templates?type=meter&language=${sessionStorage.getItem('locale') === 'en'?'en':'zh-CN'}`)
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 7},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 15},
      }
    };
    const props = {
      onRemove: (file) => {
        this.setState(({ fileList }) => {
          const index = fileList.indexOf(file);
          const newFileList = fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(({ fileList }) => ({
          fileList: [file],
        }));
        return false;
      },
      fileList: this.state.fileList,
      accept:"application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    };
    const {getFieldDecorator, getFieldValue} = this.props.form;
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayoutWithLabel}
            label={'EXCEL文件'}
          >
            <div className="dropbox">
              {getFieldDecorator('file', {
                rules: [{required: true, message: 'Excel文件不能为空'}],
              })(
                <Upload.Dragger {...props}>
                  <p className="ant-upload-drag-icon">
                    <Icon type="inbox" />
                  </p>
                  <p className="ant-upload-text">点击这个区域选择EXCEL文件</p>
                </Upload.Dragger>
              )}
            </div>
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
              协议
                {/* <Popover content={<div>
                  <p><span style={{fontWeight:'bold'}}>049xxxxx </span>: 珠华-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>077xxxxx </span>: 珠华-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>111100160xxxxx </span>: 株洲珠华-WH-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>000020xxxxxxxxxx </span>: 株洲珠华-TY-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>6101xxxxxxxxxx </span>: 西安旌旗-OneNET-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>200xxxxx </span>: 泰安-NB-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>200xxxxxxxxx </span>: 泰安-NB-阀控</p>
                  <p><span style={{fontWeight:'bold'}}>121xxxxxxxxx </span>: 泰安-NB-阀控</p>
                  <p></p>
                </div>} title="协议分类">
                <Icon type="question-circle-o" />
                </Popover>*/}
            </span>
            )}>
            {getFieldDecorator('protocol_id', {
              initialValue: this.props.editRecord?this.props.editRecord.protocol_id:"",
              rules: [{required: true, message:'协议不能为空'}],
            })(
              <Select   disabled={Boolean(this.props.editRecord)}>
                { this.state.all_protocols.map((item, key) => {
                  return (
                    <Option key={item.id}  value={item.id.toString()}>{item.name}</Option>
                  )
                }) }
              </Select>
            )}
          </FormItem>
          <FormItem
            label={'开始导入行号'}
            {...formItemLayoutWithLabel}
          >
            {getFieldDecorator('start_row', {
              initialValue: 2,
            })(
              <InputNumber min={2} style={{width:'100%'}}/>
            )}
          </FormItem>
          <FormItem
            label={'结束导入行号'}
            {...formItemLayoutWithLabel}
          >
            {getFieldDecorator('end_row', {
            })(
              <InputNumber style={{width:'100%'}}/>
            )}
          </FormItem>

        </Form>
      </div>
    );
  }
}

const EditUserArchivesFormWrap = Form.create()(EditUserArchives);
export default connect()(EditUserArchivesFormWrap);
